<template>
	<view class="page user-info">
		<view class="header">
			<view class="basj">
				<image @click="gobacks" src="/static/dazi/bak.png" mode=""></image>
				<text class="title">{{ title }}</text>
			</view>

		</view>


		<view class="cojies">
			<view class="heans">
				<head-image :name="userInfo.nickName" :url="userInfo.headImageThumb" :size="160"
					@click="onShowFullImage()"></head-image>

				<view class="csxname">
					<view class="namse">
						{{ userInfo.remarkName ? userInfo.remarkName : userInfo.nickName }}
					</view>
					<view class="cnams">
						<image v-show="userInfo.sex==1" src="/static/dazi/man.png" mode=""></image>
						<image v-show="userInfo.sex==0" src="/static/dazi/womn.png" mode=""></image>
					</view>
				</view>

				<view class="alks">
					<text>昵称 ：{{ userInfo.userName }} </text>
					<text>账号 ：{{ userInfo.userName }}</text>
				</view>

			</view>
			<view class="jiah">
				个人简介：我是你的个人简介哈哈哈哈哈哈哈哈哈
			</view>

		</view>

		<view class="content" v-if="false">
			<head-image :name="userInfo.nickName" :url="userInfo.headImageThumb" :size="160"
				@click="onShowFullImage()"></head-image>

			<view class="info-item">
				<view class="info-primary">
					<text class="info-username">
						{{ userInfo.remarkName ? userInfo.remarkName : userInfo.nickName }}
					</text>
					<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="26"
						color="#2782D7"></uni-icons>
					<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="26" color="#F76260">
					</uni-icons>
				</view>
				<text style="margin-top: 6rpx; font-size: 26rpx; color: #4D4D4D">
					昵称 ：{{ userInfo.userName }}
				</text>
				<text style="margin-top: 6rpx; font-size: 26rpx; color: #4D4D4D">
					账号 ：{{ userInfo.userName }}
				</text>
				<text class="signature" style="margin-top: 6rpx; font-size: 26rpx; color: #4D4D4D">
					签名 ：{{ userInfo.signature }}
				</text>
			</view>
		</view>
		<bar-group>

			<view class="comanset">
				<view class="onbeia" @click="onSetRemark()">
					<view class="leaj">
						设置备注
					</view>
					<image src="/static/dazi/art.png" mode=""></image>
				</view>
				<view class="onbeia" @click="gozt">
					<view class="leaj">
						动态
					</view>
					<image src="/static/dazi/art.png" mode=""></image>
				</view>

				<view class="lish">
					<view class="onbeia2 buet">
						<view class="leaj">
							加入黑名单
						</view>
						<view class="huage" @click="onBlacklistChange">
							<image v-if="userInfo.isInBlacklist" src="/static/dazi/no.png" mode=""></image>
							<image v-if=" !userInfo.isInBlacklist" src="/static/dazi/off.png" mode=""></image>
						</view>
					</view>

					<view class="onbeia2" @click="onComplaint()">
						<view class="leaj">
							投诉
						</view>
						<image src="/static/dazi/art.png" mode=""></image>
					</view>

				</view>
			</view>

			<view class="" v-if="false">
				<arrow-bar title="设置备注" @click="onSetRemark()"></arrow-bar>
				<!--      <arrow-bar v-if="mine.id !== userInfo.id" title="他的圈子" @click="toggleDropdown()"></arrow-bar>-->
				<arrow-bar title="投诉" @click="onComplaint()"></arrow-bar>

				<switch-bar title="加入黑名单" :checked="userInfo.isInBlacklist" @change="onBlacklistChange2">
				</switch-bar>
			</view>

		</bar-group>
		<!-- <bar-group> -->

		<view class="comanset">
			<view class="onbeia" @click="onDelFriend()">
				<view class="leaj" style="text-align: center;width: 100%;color: #F43D58;">
					删除好友
				</view>

			</view>


			<view class="onbeia sgesj" @click="onSendMessage()">
				<view class="leaj ">
					发消息
				</view>

			</view>



		</view>
		<!-- 
			<view class="comanset0">
				<view class="lisher" @click="onAddFriend()">
					加为好友
				</view>
				<view class="lisher as4">
					发消息
				</view>



			</view> -->






		<!-- 		<btn-bar v-show="isFriend" type="primary" title="发送消息" @click="onSendMessage()">
			</btn-bar>
			<btn-bar v-show="!isFriend" type="primary" title="加为好友" @click="onAddFriend()"></btn-bar>
			<btn-bar v-show="isFriend" type="danger" title="删除好友" @click="onDelFriend()"></btn-bar> -->
		<!-- </bar-group> -->

		<!-- 备注弹框 -->
		<up-overlay :show="show" @click="show = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="show = false" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					备注
				</view>

				<view class="iosld">
					<input type="text" placeholder="请输入备注" placeholder-class="co" v-model="memu" />

				</view>


				<view class="busnd btnact ash" @click="entmemn">
					确认
				</view>



			</view>
		</up-overlay>

		<!-- 投诉 -->

		<up-overlay :show="txshow" @click="txshow = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="txshow" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					投诉
				</view>

				<view class="iosld">
					<input type="text" placeholder="请详细描述投诉内容" placeholder-class="co" v-model="txedipa" />

				</view>


				<view class="busnd btnact2 ash">
					确认
				</view>



			</view>
		</up-overlay>



		<alert ref="globalAlert"></alert>

		<wloading v-show="activeshow"></wloading>
	</view>
</template>

<script>
	import UPopup from "@/uni_modules/uview-plus/components/u-popup/u-popup.vue";
	import UCollapseItem from "@/uni_modules/uview-plus/components/u-collapse-item/u-collapse-item.vue";
	import UCollapse from "@/uni_modules/uview-plus/components/u-collapse/u-collapse.vue";
	import UniDrawer from "@/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue";
	import CircleItem from "@/components/circle-item/circle-list.vue";
	import http from "@/common/request";
	import UniSwipeActionItem
	from "@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue";
	import UniCollapseItem from "@/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue";

	export default {
		components: {
			UniCollapseItem,
			UniSwipeActionItem,
			CircleItem,
			UniDrawer,
			UCollapse,
			UCollapseItem,
			UPopup
		},
		data() {
			return {
				txshow: false, //投诉
				txedipa: '', //投诉
				activeshow: false,
				show: false, //备注

				memu: '', //备注
				circles: [],
				userInfo: {},
				drawerVisible: false // 控制下拉框的显示
			}
		},
		methods: {
			// 去动态
			gozt() {
				uni.navigateTo({
					url: '/pages/newtreds/myInfodel'
				})
			},

			gobacks() {

				// #ifdef H5
				history.back();
				// #endif

				// #ifdef APP
				uni.navigateBack()
				// #endif

			},
			// 备注
			entmemn() {

				if (this.memu == '') {
					// 备注不能为空
					this.$refs.globalAlert.show({
						type: 'error',
						title: '提示',
						content: '备注不能为空',
						duration: 4000
					})
					return
				}
				this.activeshow = true
				this.$http({
					url: `/remark/set?targetUserId=${this.userInfo.id}&remarkName=${this.memu}`,
					method: "PUT"
				}).then((res) => {
					// uni.showToast({
					// 	title: '设置成功',
					// 	icon: 'none'
					// })
					this.activeshow = false

					this.$refs.globalAlert.show({
						type: 'success',
						title: '操作成功',
						content: '设置成功',
						duration: 2000
					})
					// 更新好友列表昵称
					let friend = JSON.parse(JSON.stringify(this.friendInfo));
					friend.headImage = this.userInfo.headImageThumb;
					friend.nickName = this.userInfo.nickName;
					friend.remarkName = this.memu
					this.friendStore.updateFriend(friend);
					this.chatStore.updateChatFromFriend(friend);
					this.userInfo.remarkName = this.memu

					this.show = false
				})

			},
			toggleDropdown() {
				uni.navigateTo({
					url: "/pages/common/user-circle?id=" + this.userInfo.id
				})
			},
			onShowFullImage() {
				let imageUrl = this.userInfo.headImage;
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			},
			onSendMessage() {
				let chat = {
					type: 'PRIVATE',
					targetId: this.userInfo.id,
					showName: this.userInfo.nickName,
					headImage: this.userInfo.headImage,
				};
				this.chatStore.openChat(chat);
				let chatIdx = this.chatStore.findChatIdx(chat);
				uni.navigateTo({
					url: "/pages/chat/chat-box?chatIdx=" + chatIdx
				})
			},

			onSetRemark() {
				this.show = true
				// uni.showModal({
				// 	position: 'top',
				// 	title: '设置备注',
				// 	content: '',
				// 	editable: true, // 允许输入
				// 	placeholderText: '',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			const message = res.content; // 获取用户输入
				// 			if (message) {
				// 				// 处理添加朋友的逻辑
				// 				this.$http({
				// 					url: `/remark/set?targetUserId=${this.userInfo.id}&remarkName=${message}`,
				// 					method: "PUT"
				// 				}).then((res) => {
				// 					uni.showToast({
				// 						title: '设置成功',
				// 						icon: 'none'
				// 					})
				// 					// 更新好友列表昵称
				// 					let friend = JSON.parse(JSON.stringify(this.friendInfo));
				// 					friend.headImage = this.userInfo.headImageThumb;
				// 					friend.nickName = this.userInfo.nickName;
				// 					friend.remarkName = message
				// 					this.friendStore.updateFriend(friend);
				// 					this.chatStore.updateChatFromFriend(friend);
				// 					this.userInfo.remarkName = message
				// 				})
				// 			} else {
				// 				uni.showToast({
				// 					title: '备注不能为空',
				// 					icon: 'none'
				// 				});
				// 			}
				// 		}
				// 	}
				// });
			},

			onAddFriend() {
				uni.showModal({
					position: 'top',
					title: '打个招呼',
					content: '你好',
					editable: true, // 允许输入
					placeholderText: '你好',
					success: (res) => {
						if (res.confirm) {
							const message = res.content; // 获取用户输入

							if (!message || message.length <= 50) {
								// 处理添加朋友的逻辑
								this.$http({
									url: `/friend/apply?friendId=${this.userInfo.id}&message=${message}`,
									method: "POST"
								}).then((res) => {
									uni.showToast({
										title: '已发送好友申请',
										icon: 'none'
									})
								})
							} else {
								uni.showToast({
									title: '输入不能超过50个字符',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			onDelFriend() {
				uni.showModal({
					title: "确认删除",
					content: `确认删除 '${this.userInfo.nickName}',并删除聊天记录吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/friend/delete/${this.userInfo.id}`,
							method: 'delete'
						}).then((data) => {
							this.friendStore.removeFriend(this.userInfo.id);
							this.chatStore.removePrivateChat(this.userInfo.id);
							uni.showToast({
								title: `与 '${this.userInfo.nickName}'的好友关系已解除`,
								icon: 'none'
							})
						})
					}
				})
			},
			onComplaint() {
				this.txshow = true
				// uni.navigateTo({
				// 	url: "/pages/common/complaint"
				// })
			},
			onBlacklistChange() {
				this.activeshow = true
				var isChecked = this.userInfo.isInBlacklist;

				console.log(this.userInfo.isInBlacklist)

				if (this.userInfo.isInBlacklist == false) {
					this.$http({
						url: "/blacklist/add?userId=" + this.userInfo.id,
						method: "POST"
					}).then(() => {
						this.activeshow = false
						this.$refs.globalAlert.show({
							type: 'success',
							title: '操作成功',
							content: '加入黑名单成功',
							duration: 2000
						})
						// uni.showToast({
						// 	title: `已将'${this.userInfo.nickName}'加入黑名单`,
						// 	icon: 'none'
						// })
						this.userInfo.isInBlacklist = true
					}).catch(() => {
						this.activeshow = false
						this.userInfo.isInBlacklist = !this.userInfo.isInBlacklist;
					})
				} else {
					this.$http({
						url: "/blacklist/remove?userId=" + this.userInfo.id,
						method: "DELETE"
					}).then(() => {
						this.activeshow = false
						this.userInfo.isInBlacklist = false;
					}).catch(() => {
						this.activeshow = false
						this.userInfo.isInBlacklist = false;
					})
				}

			},
			onBlacklistChange2(e) {
				const isChecked = e.detail.value;
				this.userInfo.isInBlacklist = isChecked;
				if (isChecked) {
					uni.showModal({
						title: "加入黑名单",
						content: `您将不再收到对方的消息,确认将 '${this.userInfo.nickName}'加入黑名单吗?`,
						success: (res) => {
							if (res.cancel) {
								// 还原按钮
								this.userInfo.isInBlacklist = !isChecked;
								return;
							}
							this.$http({
								url: "/blacklist/add?userId=" + this.userInfo.id,
								method: "POST"
							}).then(() => {
								uni.showToast({
									title: `已将'${this.userInfo.nickName}'加入黑名单`,
									icon: 'none'
								})
							}).catch(() => {
								this.userInfo.isInBlacklist = !isChecked;
							})
						}
					})
				} else {
					this.$http({
						url: "/blacklist/remove?userId=" + this.userInfo.id,
						method: "DELETE"
					}).catch(() => {
						this.userInfo.isInBlacklist = !isChecked;
					})
				}
			},
			updateFriendInfo() {
				// store的数据不能直接修改，深拷贝一份store的数据
				let friend = JSON.parse(JSON.stringify(this.friendInfo));
				friend.headImage = this.userInfo.headImageThumb;
				friend.nickName = this.userInfo.nickName;
				this.$http({
					url: "/friend/update",
					method: "PUT",
					data: friend
				}).then(() => {
					// 更新好友列表中的昵称和头像
					this.friendStore.updateFriend(friend);
					// 更新会话中的头像和昵称
					this.chatStore.updateChatFromFriend(this.userInfo);
				})
			},
			loadUserInfo(id) {
				this.$http({
					url: "/user/detail/" + id,
					method: 'GET'
				}).then((user) => {
					this.userInfo = user;
					// 如果发现好友的头像和昵称改了，进行更新
					if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
							this.userInfo.nickName != this.friendInfo.nickName)) {
						this.updateFriendInfo()
					}
				})
			},
		},
		computed: {
			mine() {
				return this.userStore.userInfo;
			},
			isFriend() {
				return !!this.friendInfo;
			},
			friendInfo() {
				let friends = this.friendStore.friends;
				let friend = friends.find((f) => f.id == this.userInfo.id);
				return friend;
			}
		},
		onLoad(options) {
			// 查询用户信息
			this.loadUserInfo(options.id);
		}
	}
</script>

<style lang="scss" scoped>
	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}

	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.iosld {
		margin: 50rpx 0;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}

	.pouper {
		background-color: #fff;
		width: 600rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.seacus {
		display: flex;
		align-items: center;
	}

	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}

	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}

	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btnact2 {
		background-color: #2a222f !important;
		color: #fff !important;
	}

	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}



	.as4 {
		background: #FB75D6 !important;
		border: none !important;
		color: #fff !important;

	}

	.comanset0 {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.lisher {
			width: 100%;

			height: 100rpx;
			line-height: 100rpx;
			padding: 0 60rpx 0;
			background: #FFFFFF;
			border-radius: 50rpx;
			border: 1px solid #FB75D699;
			color: #FB75D6;
			font-size: 32rpx;
		}
	}

	.sgesj {
		margin: 120rpx 0 30rpx;
		background: #FB75D6 !important;

		// 
		.leaj {
			text-align: center;
			width: 100%;
			color: #fff !important;
			font-size: 32rpx;
		}
	}

	.buet {
		border-bottom: 1px solid rgba(248, 239, 249, 1);
	}

	.lish {
		background-color: #fff;
		border-radius: 30rpx;
	}

	.huage {
		image {
			width: 64rpx !important;
			height: 48rpx !important;
		}
	}

	.comanset0 {
		margin: 0 30rpx;
	}

	.comanset {
		margin: 0 30rpx;
	}

	.onbeia2 {
		// background-color: #fff;
		height: 100rpx;
		// padding: 0 30rpx;
		margin: 0 30rpx;
		display: flex;
		// border-radius: 30rpx;
		align-items: center;
		justify-content: space-between;

		.leaj {
			color: #2A222F;
			font-size: 28rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.onbeia {
		margin-bottom: 30rpx;
		background-color: #fff;
		height: 100rpx;
		padding: 0 30rpx;
		display: flex;
		border-radius: 30rpx;
		align-items: center;
		justify-content: space-between;

		.leaj {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.jiah {
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
		padding: 10rpx 30rpx;
		margin-bottom: 30rpx;
	}

	.heans {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.alks {
		display: flex;
		flex-direction: column;

		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
			margin-bottom: 14rpx;
		}
	}

	.csxname {
		margin: 20rpx 0 10rpx;
		display: flex;
		align-items: center;
	}

	.namse {
		color: rgba(42, 34, 47, 1);
		font-size: 40rpx;
	}

	.cnams {
		image {
			margin-left: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.basj {
		display: flex;
		align-items: center;
		height: 60rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.title {
			margin-left: 10rpx;
			color: #2A222F;
			font-size: 40rpx;
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		padding: 5px 20rpx;
		// background-color: #f8f8f8;
		// line-height: 50px;
		// font-size: 30rpx;
		letter-spacing: 2rpx;
		/* 字母间距 */
		font-weight: 600;
		// border: #dddddd solid 1px;

		.btn-side {
			position: absolute;
			line-height: 60rpx;
			font-size: 28rpx;
			cursor: pointer;

			&.right {
				right: 30rpx;
			}
		}
	}


	page {
		width: 100%;
		height: 100vh;
		background: url('@/static/dazi/bgh.png') no-repeat;
		background-size: 100% 100%;
	}

	.user-info {
		// background: #f4f4f4;

		.content {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			padding: 30rpx;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				padding-left: 40rpx;
				flex: 1;

				.signature {
					margin-top: 12rpx;
					display: -webkit-box;
					/* 使其成为一个伸缩容器 */
					-webkit-box-orient: vertical;
					/* 设置子元素的排列方向为垂直 */
					overflow: hidden;
					/* 超出部分隐藏 */
					-webkit-line-clamp: 3;
					/* 限制最多显示3行 */
					text-overflow: ellipsis;
					/* 文字超出部分显示省略号 */
				}

				.info-primary {
					display: flex;
					align-items: center;

					.info-username {
						font-size: 40rpx;
						font-weight: 600;


					}
				}
			}
		}
	}
</style>